<!--
 * @Author: your name
 * @Date: 2020-08-22 01:51:42
 * @LastEditTime: 2020-08-22 02:01:45
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \exam-list\src\components\checkpaper\PaperDetail.vue
-->
<template>
  <div class="room">
    <h2>
      教室管理
    </h2>
    <div class="room-content">
      <div style="padding:24px">
        <div>
          <el-row style="margin-bottom :25px">
            <el-button type="primary" icon="el-icon-plus" style="background:rgb(1, 57, 253);width:158px;height:40px;"
              @click="open">
              添加班级</el-button>
          </el-row>
          <div class="grade-table">
            <el-table :data="rooom" style="width: 100%" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
              <el-table-column prop="room_text" label="教室号">
              </el-table-column>
              <el-table-column prop="address" label="操作">
                <!-- <span props="room_id" @click="deleteSome">删除</span> -->
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { addClassRoom, delClassRoom } from '../../api/ClassManage/Room'
import { mapActions, mapState } from 'vuex'
// import axios from '../../utils/request'
export default {
  data () {
    return {
      tableData: [{
        grade_id: 'ef5vzf-mk31ka-3ltqao-3ikaf7',
        grade_name: '1610A',
        room_id: 'ddlo2b-qqts69-2pq07w-hiua58',
        room_text: '34313',
        subject_id: 'fyu3ln-azjkie',
        subject_text: '渐进式开发(react)'
      }]
    }
  },
  methods: {
    ...mapActions('Room', ['getRoom', 'delClassRoom']),
    handleClick (e) {
      this.$Confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((val) => {
        const data = {
          data: {
            room_id: e.room_id
          }
        }
        delClassRoom(data).then(e => {
          if (e.data.code === 1) {
            this.getRoom()
          } else {
            console.log(e.data.msg)
          }
        })
      })
    },
    open () {
      this.$prompt('教室号', '添加班级', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        addClassRoom(value.trim())
        console.log(this.getRoom())
        this.getRoom()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    }
  },
  created () {
    this.getRoom()
  },
  computed: {
    ...mapState('Room', ['rooom'])
  }
}
</script>

<style>
.room {
  width: 100vw;
  height: 100vh;
  background: #f0f2f5;
  padding: 0px 24px 24px;
  display: flex;
  flex-direction: column;
}
.room h2 {
  padding: 20px 0px;
  margin-top: 10px;
}

.room-content {
  background: #fff;
  flex: 1;
  border-radius: 10px;
}
</style>
